<template>
  <el-card class="box-card">
    <template #header>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="入库单">
          <el-input v-model="formInline.inStoreSn" placeholder="请输入入库单" clearable />
        </el-form-item>
        <el-form-item label="关联计划单">
          <el-input v-model="formInline.planSn" placeholder="请输入关联计划单" clearable />
        </el-form-item>
        <el-form-item label="供应商">
          <selectSupplier v-model="formInline.supplierId"></selectSupplier>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.status" placeholder="请选择入库状态" clearable>
            <el-option v-for="item in counter.inWarehouseStatus" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </template>

    <el-table :data="tableData.rows">
      <el-table-column prop="inStoreSn" label="入库单" align="center" width="220">
        <template #default="scope">
          <el-button type="primary" text @click="proxy.$utils.toLink(`/inWarehouse/inWarehouseDetails?id=${scope.row.id}`)">{{scope.row.inStoreSn}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="planSn" label="关联计划单" align="center" min-width="150">
        <template #default="scope">
          <el-button type="primary" text @click="proxy.$utils.toLink(`/inWarehouse/scheduleDetails?id=${scope.row.inPlanId}`)">{{scope.row.planSn}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="状态">
        <template #default="scope">
          {{counter.idString_format("inWarehouseStatus",scope.row.status)}}
        </template>
      </el-table-column>
      <el-table-column prop="supplierName" label="供应商" />
      <el-table-column prop="totalWeight" label="总重量(KG)" />
      <el-table-column prop="totalSize" label="总体积(m³)" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column prop="createTime" label="创建时间" align="center" width="160" />
    </el-table>
    <Pagination v-if="tableData['total']" :total="tableData['total']" v-model:page="formInline.pageNum" v-model:limit="formInline.pageSize" @pagination="getInfo" />
  </el-card>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
//counter
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
import { onMounted } from "vue";

let formInline = ref({
  pageNum: 1,
  pageSize: 10,
  inStoreSn: "",
  status: "",
  supplierId: "",
  planSn: "",
});
let tableData = ref({});

onMounted(() => {
  search();
});

let search = async () => {
  formInline.value.pageNum = 1;
  getInfo();
};
let getInfo = async () => {
  tableData.value = await proxy.$apis.inWarehousList(formInline.value);
};
</script>

<style lang="scss" scoped>
.box-card {
  margin: 20px;
}
</style>
